<template>
  <div class="agreement-page">
    <div class="container">
      <h1 class="page-title">用户协议</h1>
      <div class="agreement-content">
        <h2>1. 总则</h2>
        <p>1.1 斑马中国版权服务平台（以下简称"本平台"）的所有权和运营权归斑马中国所有。</p>
        <p>1.2 用户在注册之前，应当仔细阅读本协议，并同意遵守本协议后方可成为注册用户。</p>

        <h2>2. 服务内容</h2>
        <p>2.1 本平台的具体服务内容由本平台根据实际情况提供，包括但不限于：</p>
        <ul>
          <li>版权存证</li>
          <li>版权登记</li>
          <li>版权监测</li>
          <li>维权服务</li>
        </ul>

        <h2>3. 用户权利和义务</h2>
        <p>3.1 用户有权利：</p>
        <ul>
          <li>按照本平台规定的程序和要求使用本平台提供的各项服务</li>
          <li>对本平台的服务提出意见和建议</li>
        </ul>

        <h2>4. 隐私保护</h2>
        <p>4.1 本平台将按照隐私政策的规定保护用户的个人信息。</p>
        <p>4.2 未经用户同意，本平台不会向第三方披露用户个人信息。</p>

        <h2>5. 知识产权</h2>
        <p>5.1 本平台的所有内容，包括但不限于文字、图片、音频、视频、软件、程序、设计等，均由本平台或其他权利人依法拥有其知识产权。</p>

        <h2>6. 免责声明</h2>
        <p>6.1 用户明确同意其使用本平台服务所存在的风险将完全由其自己承担。</p>

        <h2>7. 协议修改</h2>
        <p>7.1 本平台有权在必要时修改本协议条款。</p>
        <p>7.2 本协议条款变更后，如果用户继续使用本平台提供的服务，即视为用户已接受修改后的协议。</p>
      </div>
    </div>
  </div>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'Agreement'
});
</script>

<style scoped lang="scss">
.agreement-page {
  padding: $spacing-extra-large 0;
  background-color: $background-color-base;
}

.container {
  max-width: $container-width;
  margin: 0 auto;
  padding: $spacing-extra-large;
  background-color: $background-color-white;
  border-radius: $border-radius-base;
  box-shadow: $box-shadow-light;
}

.page-title {
  font-size: $font-size-extra-large;
  color: $text-primary;
  margin-bottom: $spacing-extra-large;
  text-align: center;
}

.agreement-content {
  h2 {
    font-size: $font-size-large;
    color: $text-primary;
    margin: $spacing-extra-large 0 $spacing-base;
  }

  p {
    color: $text-regular;
    line-height: 1.6;
    margin-bottom: $spacing-base;
  }

  ul {
    list-style-type: disc;
    padding-left: $spacing-large;
    margin-bottom: $spacing-base;
    color: $text-regular;

    li {
      margin-bottom: $spacing-small;
    }
  }
}

@media screen and (max-width: 768px) {
  .container {
    padding: $spacing-large;
  }
}
</style> 